.achievement{
	height: 100%;
	width: 100%;
	font-size: .32rem;
	.title {
		color: #fff;
		font-size: .26rem;
		height: .7rem;
		line-height: .7rem;
		padding: 0 .2rem;
		background-color: #f3a96c;
        i {
            margin-right: 0.05rem;
        }
  	}
  	.tips {
  	    height: 1.2rem;
        width: 100%;
  	     display: webkit-flex;
        display: flex;
  	    .cur-mot,.pre-mot,.day-mot{
  	        flex: 1;
  	        text-align: center;
  	        margin-top: .1rem;
  	        color: #f46d4c;
  	        font-size: .35rem;
  	        .mot-name {
  	            color: #666;
  	            font-size: .26rem;
  	            margin: .14rem 0 .2rem;
  	        }
  	        span {
  	            width: .5rem;
  	            height: 4px;
  	            margin: 0 auto;
  	            display: block;
  	            background-color: #f46d4c;
  	        }
  	    }
      }
      .span_move {
        width: 1rem;
        height: 5px;
        background: #f46d4c;
        position: absolute;
        transition: all .3s;
        &.left {
          left: 0.75rem;
        }
        &.center {
            left: 3.25rem;
        }
        &.right {
          left: 5.75rem;
        }
      }
  	.data-box {
  	    .cur-data {
  	        .progress-box {
                padding: .24rem 0 .13rem;
                .progress {
                    height: .35rem;
                    line-height: .35rem;
                    color: #fff;
                    font-size: .18rem;
                    width: 75.2%;
                    margin: 0 auto;
                    background-image: linear-gradient(to right, #f2ca68, #f94c0d);
                    position: relative;
                    .cur-progress {
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        right: 0;
                        background: #dedede;
                    }
                    .text1 {
                        position: absolute;
                        left: 0;
                    }
                    .text2 {
                        position: absolute;
                        right: .8rem;
                    }
                }
                .encourage {
                    text-align: center;
                    font-size: .24rem;
                    color: #f46d4c;
                    padding-top:.1rem;
                }
            }
            .data-name {
                height: 1rem;
                line-height: 1rem;
                padding-left: .2rem;
            }
            .csroll-title {
                display: -webkit-flex;
                display: flex;
                border-bottom: 1px solid #ccc;
                height: .8rem;
                line-height: .8rem;
                font-size: .3rem;
                span{
                    text-align: center;
                    color: #666;
                }
                .name{
                    flex:350;
                    padding-left: .5rem;
                    text-align: left;
                    word-break: keep-all;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .money{
                    flex:200;
                }
                .num{
                    flex:200;
                }
            }
            .csroll_box {
                font-size: .3rem;
                width: 100%;
                height: 8rem;
                position: relative;
                .goods {
                    width: 100%;
                    .item{
                        display: webkit-flex;
                        display: flex;
                        border-bottom: .02rem dashed #ddd;
                        height: .8rem;
                        line-height: .8rem;
                        span{
                            text-align: center;
                            color: #666;
                        }
                        .name{
                            flex:350;
                            padding-left: .5rem;
                            text-align: left;
                            word-break: keep-all;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        .money{
                            flex:200;
                        }
                        .num{
                            flex:200;
                        }
                    }
                }
            }
  	    }
  	    .bottom {
  	        position: fixed;
  	        bottom: 0;
  	        width: 100%;
            border-top: 1px solid #ccc;
            display: webkit-flex;
            display: flex;
            height: .8rem;
            line-height: .8rem;
            font-size: .3rem;
            span{
                text-align: center;
                color: #666;
            }
            .name{
                flex:350;
                padding-left: .5rem;
                text-align: left;
                word-break: keep-all;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .money{
                flex:200;
            }
            .num{
                flex:200;
            }
  	    }
  	    
  	}
	.delConfirmMask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		background-color: rgba( 0, 0, 0, .63);
		font-size: .28rem;
		color: #444;
		.delConfirm {
			width: 5rem;
			// height: 3rem;
			box-sizing: border-box;
			background-color: #fff;
			box-shadow: 2px 0 2px 0 rgba(220, 96, 96, 0.31);
			border-radius: 10px;
			.tipText {
				text-align: center;
				// line-height: 2rem;
				padding: 1rem .2rem;
			}
			.btn {
				text-align: center;
				padding-bottom: .3rem;
				button {
					background:none;
					border: none;
					width: 1.4rem;
					height: .5rem;
					background-color: #FA7D70;
					color: #fff;
					border-radius: 100px;
				}
				.cancle {
				    background-color: #adabab;
				    margin-right: 10px;
				}
			}
		}
    }
    .swiper-container {
        width: 100%;
        overflow: hidden;
      }
    .swiper-wrapper {
        display: flex !important;
        width: 300%;
    }
}